<template>
  <div>
    <div class="home-head">
      <p><img :src="'img2.png' | imagePath" />总店长</p>
      <p>雅迪电动车<img :src="'xiala.png' | imagePath" /></p>
      <p><img :src="'newsIcon.png' | imagePath" /></p>
    </div>
    <mt-swipe  class="home-swiper">
      <mt-swipe-item v-for="item in ['1','2']" :key="item">
        <img :src="'img1.png' | imagePath" />
      </mt-swipe-item>
    </mt-swipe>
    <div class="home-type">
      <div class="home-type-item home-type-first">
        <div class="home-type-first-item" @click="$.router.push('storageBattery')">
          <p>电瓶服务</p>
          <img :src="'home1.png' | imagePath" >
        </div>
        <div class="home-type-first-item" @click="$.router.push('electricCar')">
          <p>电动车</p>
          <img :src="'home2.png' | imagePath" >
        </div>
      </div>
      <div class="home-type-item home-type-second">
        <div class="home-type-second-item" @click="$.router.push('charger')">
          <p>充换电服务</p>
          <img :src="'home3.png' | imagePath" >
        </div>
        <div class="home-type-second-item" @click="$.router.push('repair')">
          <p>上门快修</p>
          <img :src="'home4.png' | imagePath" >
        </div>
      </div>
      <div class="home-type-item home-type-third">
        <div class="home-type-third-item" @click="$.router.push('shopping')">
          <p>商城</p>
          <img :src="'home5.png' | imagePath" >
        </div>
        <div class="home-type-third-item" @click="$.router.push('enquiries')">
          <p>一键查询</p>
          <img :src="'home6.png' | imagePath" >
        </div>
      </div>
      <div class="home-type-item home-type-fourth">
        <img :src="'home7.png' | imagePath" />
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{}
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#FFFFFF')
    }
  }
</script>
<style>
.home-head{
  background-color: #6EC6C6;
  display: flex;
  align-items: center;
  height: 1.33rem;
  padding: 0 0.4rem;
}
.home-head p{
  display: flex;
  align-items: center;
}
.home-head p:nth-child(1){
  color: #F4F4F4;
  font-size: 0.32rem;
  flex: 1;
}
.home-head p:nth-child(1) img{
  width: 0.64rem;
  height: 0.64rem;
  margin-right: 0.13rem;
}
.home-head p:nth-child(2){
  color: #F4F4F4;
  font-size: 0.48rem;
  flex: 1;
  display: flex;
  justify-content: center;
}
.home-head p:nth-child(2) img{
  width: 0.26rem;
  height: 0.1rem;
  margin-left: 0.13rem;
}
.home-head p:nth-child(3){
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.home-head p:nth-child(3) img{
  width: 0.48rem;
  height: 0.48rem;
}
.home-swiper{
  margin: auto;
  border-radius: 0.13rem;
  height: 4.5rem;
  background-color: #FFFFFF;
}
.mint-swipe-item{
 border-radius: 0.13rem;
 width: 9.2rem;
}
.mint-swipe-item img{
  display: block;
  width: 100%;
  /* height: 4.1rem; */
}
.mint-swipe-indicators{
  left: 90% !important;
}
.mint-swipe-indicator{
  width: 5px;
  height: 5px;
}
.home-type{
  padding: 0.32rem 0.4rem;
}
.home-type-item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.12rem;
}
.home-type-first-item{
  border-radius: 0.1rem;
  color: #343434;
  font-size: 0.38rem;
}
.home-type-first-item:nth-child(1){
  width: 4.77rem;
  height: 1.61rem;
  background-color:#C8DCF2;
  padding: 0.26rem 0.56rem 0.26rem 0.76rem;
  display: flex;
  justify-content: space-between;
}
.home-type-first-item:nth-child(1) img{
  width: 1.52rem;
  height: 1.25rem;
  margin-top: 0.34rem;
}
.home-type-first-item:nth-child(2){
  width: 2.48rem;
  height: 1.61rem;
  background-color: #E0F1EF;
  text-align: center;
  padding: 0.26rem;
}
.home-type-first-item:nth-child(2) img{
  width: 1.62rem;
  height: 1.06rem;
}
.home-type-second-item:nth-child(1){
  background-color: #D4EBFA;
  color: #343434;
  font-size: 0.38rem;
  width: 2.48rem;
  height: 1.61rem;
  padding: 0.26rem;
  border-radius: 0.1rem;
  text-align: center;
}
.home-type-second-item:nth-child(1) img{
  width: 1.06rem;
  height: 1.06rem;
  margin:0.05rem auto 0;
}
.home-type-second-item:nth-child(2){
  width: 4.77rem;
  height: 1.61rem;
  background-color:#FCE5E8;
  padding: 0.26rem 0.56rem 0.26rem 0.76rem;
  display: flex;
  justify-content: space-between;
  border-radius: 0.1rem;
  font-size: 0.38rem;
  color: #343434;
}
.home-type-second-item:nth-child(2) img{
  width: 1.38rem;
  height: 1.32rem;
  margin-top: 0.34rem;
}
.home-type-third-item{
  width: 4.53rem;
  height: 2.13rem;
  display: flex;
  justify-content: space-between;
}
.home-type-third-item p{
  color: #343434;
  font-size: 0.38rem;
  margin: 0.4rem 0 0 0.76rem;
}
.home-type-third-item:nth-child(1){
  background-color: #FCE4D6;
  border-radius: 0.1rem;
}
.home-type-third-item:nth-child(1) img{
  width:1.41rem;
  height: 1.28rem;
  margin: 0.48rem 0.54rem 0 0;
}
.home-type-third-item:nth-child(2){
  background-color: #F8EEFF;
  border-radius: 0.1rem;
}
.home-type-third-item:nth-child(2) img{
  width:1.17rem;
  height: 1.17rem;
  margin: 0.66rem 0.52rem 0 0;
}
.home-type-fourth{
  margin-top: 0.34rem;
}
.home-type-fourth img{
  width: 9.2rem;
  height: 2.66rem;
}
</style>
